<template>
	<view>
		<view class="wave">
			<view class="react react1"></view>
			<view class="react react2"></view>
			<view class="react react3"></view>
		</view>
	</view>	
</template>

<script>
</script>

<style lang="scss" scoped>
	.wave {
	    width: 60px;
	    height: 20upx;
	    display: flex;
	    justify-content: space-evenly;
	}
	
	.react{
	    width: 6upx;
	    height: 40upx;
	    background-color: $bg-color;
	    animation: waveLoading 1.2s both infinite;
	}
	
	/* 设置延时 */
	.react1{
	    animation-delay: 0s;
	}
	.react2{
	    animation-delay: -1.1s;
	}
	.react3{
	    animation-delay: -1.0s;
	}
	.react4{
	    animation-delay: -0.9s;
	}
	.react5{
	    animation-delay: -0.8s;
	}
	
	@keyframes waveLoading{
	    0% {
	        transform: scaleY(0.4);
	    }
	    20% {
	        transform: scaleY(1);
	    }
	    80% {
	        transform: scaleY(0.4);
	    }
	    100% {
	        transform: scaleY(0.4);
	    }
	}
</style>
